<template>
  <div class="p-5">
    <div class="border border-dashed border-red-500 text-red-500 p-2 mb-4 bg-red-100 font-bold text-12">常用的表单设置,更多设置请参考文档: </div>
    <ECForm @register="registerFormConf"></ECForm>
    <ECForm @register="registerForm"></ECForm>

  </div>
</template>

<script lang="ts" setup>
import { dict } from '@zm-pkg/core'
import { useForm } from '@zm-pkg/ui'

const [registerForm, { setProps }] = useForm({
  mode: 'dialog',
  schemas: [
    {
      component: 'Select',
      label: 'demoLable1',
      name: 'key1',
      props: {
        options: dict('CLOUMN_TYPE')
      }
    },
    {
      component: 'Input',
      label: 'demoLable2',
      name: 'key2'
    },
    {
      component: 'Input',
      label: 'demoLable3',
      name: 'key3'
    },
    {
      component: 'Input',
      label: 'demoLable4',
      name: 'key4'
    },
    {
      component: 'Input',
      label: 'demoLable5',
      name: 'key5'
    },
  ],
  buttons: []
})

const [registerFormConf] = useForm({
  mode: null,
  model: {
    layout: 'horizontal',
    labelWidth: 100,
    mode: 'search'
  },
  schemas: [
    {
      component: 'Select',
      label: '表单模式',
      name: 'mode',
      props: {
        options: [
          { label: 'search', value: 'search' },
          { label: 'dialog', value: 'dialog' }
        ],
        onChange(mode: 'search' | 'dialog' | null) {
          setProps({
            mode
          })
        }
      }
    },

    {
      component: 'Select',
      label: '对齐方式',
      name: 'layout',
      props: {
        options: [
          { label: 'vertical', value: 'vertical' },
          { label: 'inline', value: 'inline' },
          { label: 'horizontal', value: 'horizontal' }
        ],
        onChange(layout: 'vertical' | 'inline' | 'horizontal') {
          setProps({
            layout
          })
        }
      }
    },

    {
      component: 'InputNumber',
      label: '标签宽度',
      name: 'labelWidth',
      props: {
        max: 250,
        min: 70,
        onBlur(e) {
          setProps({
            labelWidth: Number(e.target.value)
          })
        }
      }
    },
    {
      component: 'InputNumber',
      label: '英文标签宽度',
      name: 'enLabelWidth',
      props: {
        max: 350,
        min: 70,
        onBlur(e) {
          setProps({
            enLabelWidth: Number(e.target.value)
          })
        }
      }
    },
    {
      component: 'Select',
      label: '标签对齐方式',
      name: 'labelAlign',
      props: {
        options: [
          { label: 'left', value: 'left' },
          { label: 'right', value: 'right' }
        ],
        onChange(labelAlign: 'left' | 'right') {
          setProps({
            labelAlign
          })
        }
      }
    },
    {
      component: 'Select',
      label: '表单是否禁用',
      name: 'disabled',
      props: {
        options: [
          { label: '是', value: true },
          { label: '否', value: false }
        ],
        onChange(disabled: boolean) {
          setProps({
            disabled
          })
        }
      }
    },
    {
      component: 'Select',
      label: '一行几个元素',
      name: 'colProps',
      props: {
        options: [
          { label: '1', value: 24 },
          { label: '2', value: 12 },
          { label: '3', value: 8 },
          { label: '4', value: 6 }
        ],
        onChange(span: number) {
          setProps({
            colProps: {
              span
            }
          })
        }
      }
    },

    {
      component: 'Divider'
    }
  ]
})


</script>
